// 此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
let content = document.querySelector('.content'); // 获取类名为 content 的最外层大盒子
// 渲染 top栏
content.innerHTML = `
<div class="top">
  <input type="checkbox" /> 全选
  <div class="top-titles">
    <p class="product">演出</p>
    <p class="top-price">单价</p>
    <p class="top-number">数量</p>
    <p class="top-total">小计</p>
    <p class="top-del">操作</p>
  </div>
</div>
`;
// 渲染 list 的数据
list.forEach((ele) => {
  content.innerHTML += `
  <ul class="center">
    <li>
      <div class="select">
        <input type="checkbox" />
      </div>
      <div class="pic">
        <img src="${ele.pic}" alt="" />
      </div>
      <div class="name">${ele.name}</div>
      <div class="price">￥ <span>${ele.price}</span></div>
      <div class="number">
        <button class="reduce">-</button>
        <input type="text" value="1" />
        <button class="add">+</button>
      </div>
      <div class="subtotal">￥ <span>${ele.price}</span></div>
      <div class="del">
        <button>删除</button>
      </div>
    </li>
  </ul>
  `;
});
// 渲染 bottom栏
content.innerHTML += `
<div class="bottom">
    <p class="totalCount">总购买数量: 0</p>
    <p>
      <button class="pay">去结算</button>
      <button class="clear">清空购物车</button>
      <button class="clear_select">删除所有已选中</button>
      <button class="list">返回列表页</button>
    </p>
    <p>总价格 : ￥ <span>0.00</span></p>
</div>
`;
// 获取所有单价
let prices = document.querySelectorAll('.price span');
console.log(prices);
// 获取所有购买数量的 input 框
let inputs = [...document.querySelectorAll('.number input')];
console.log(inputs);
// 获取所有小计
let subtotals = [...document.querySelectorAll('.subtotal span')];
console.log(subtotals[0].innerHTML);
// 封装一个 计算小计金额 的函数供随时调用
function calcSubtotal() {
  for (let i = 0; i < subtotals.length; i++) {
    subtotals[i].textContent = prices[i].textContent * inputs[i].value;
  }
}
calcSubtotal();

//2. 能够全选反选，同时总价、总购买数量变化
// 获取全选框
let allCheckbox = document.querySelector('.top input');
// 获取所有演出的勾选框
let checkboxs = [...document.querySelectorAll('.select input')];
console.log(checkboxs);
// 获取总购买数量
let totalCount = document.querySelector('.totalCount');
// 获取总价
let totalPrice = document.querySelector('.bottom span');
console.log(totalPrice.innerHTML);
// 给全选框绑定点击事件，拿到其勾选状态赋值给下面所有演出的勾选框 同时勾选状态时计算总购买数量与总价
allCheckbox.addEventListener('click', () => {
  // 勾选状态赋值给下面所有演出的勾选框
  checkboxs.forEach((checkbox) => {
    checkbox.checked = allCheckbox.checked;
  });
  calcTotal01();
});
// 封装一个 计算总购买数量与总价 的函数供随时调用，此函数用于全选框的统计
function calcTotal01() {
  // 定义一个变量统计总购买数量，此处变量用于全选框的统计
  let a = 0;
  // 定义一个变量统计总价，此处变量用于全选框的统计
  let b = 0;
  // 如果全选框是勾选状态，则用 a 去接下面每个演出数量的累加值，用 b 去接下面每个小计的累加值
  if (allCheckbox.checked) {
    inputs.forEach((input) => {
      a += Number(input.value);
    });
    subtotals.forEach((subtotal) => {
      b += Number(subtotal.innerHTML);
    });
  } else {
    a = 0;
    b = 0;
  }
  totalCount.innerHTML = `总购买数量: ${a}`;
  totalPrice.innerHTML = b;
}
// 给下面所有演出的勾选框绑定点击事件
checkboxs.forEach((checkbox) => {
  checkbox.onclick = () => {
    // 定义一个变量统计勾选的数量
    let count = 0;
    checkboxs.forEach((checkbox, index) => {
      if (checkbox.checked) {
        count++;
      }
      //判断count和btns.length的关系
      allCheckbox.checked = count === checkboxs.length;
    });
    calcTotal02();
  };
});
// 封装一个 计算总购买数量与总价 的函数供随时调用，此函数用于单选框的统计
function calcTotal02() {
  // 定义一个变量统计总购买数量，此处变量用于单选框的统计
  let num = 0;
  // 定义一个变量统计总价，此处变量用于单选框的统计
  let price = 0;
  checkboxs.forEach((checkbox, index) => {
    // 判断下面所有演出的勾选框的状态值，为 true 则用 num 和 price 去接累加的数量和总价
    if (checkbox.checked) {
      num += Number(inputs[index].value);
      price += Number(subtotals[index].innerHTML);
    }
    totalCount.innerHTML = `总购买数量: ${num}`;
    totalPrice.innerHTML = price;
  });
}

//3. 单个商品数量能够加减，但是有限制，加减的时候小计价格，总价要变化，总购买数量也要变化
// 获取减少按钮
let reduceBtns = document.querySelectorAll('.reduce');
// 获取增加按钮
let addBtns = document.querySelectorAll('.add');
// 给所有减少按钮绑定点击事件
reduceBtns.forEach((reduceBtn, index) => {
  reduceBtn.onclick = () => {
    let val = Number(inputs[index].value);
    val -= 1;
    if (val < 0) val = 0;
    inputs[index].value = val;
    calcSubtotal(); // 计算小计金额
    calcTotal01(); // 计算总购买数量与总价，此函数用于全选框的统计
    calcTotal02(); // 计算总购买数量与总价，此函数用于单选框的统计
  };
  // 设置鼠标按下减少按钮时的效果
  reduceBtn.addEventListener('mousedown', () => {
    reduceBtn.style.color = 'red';
    reduceBtn.style.border = '1px solid red';
  });
  // 设置鼠标按下减少按钮抬起时的效果
  reduceBtn.addEventListener('mouseup', () => {
    reduceBtn.style.color = null;
    reduceBtn.style.border = null;
  });
});
// 给所有增加按钮绑定点击事件
addBtns.forEach((addBtn, index) => {
  addBtn.onclick = () => {
    let val = Number(inputs[index].value);
    val += 1;
    if (val > 10) val = 10;
    inputs[index].value = val;
    calcSubtotal(); // 计算小计金额
    calcTotal01(); // 计算总购买数量与总价，此函数用于全选框的统计
    calcTotal02(); // 计算总购买数量与总价，此函数用于单选框的统计
  };
  // 设置鼠标按下增加按钮时的效果
  addBtn.addEventListener('mousedown', () => {
    addBtn.style.color = 'red';
    addBtn.style.border = '1px solid red';
  });
  // 设置鼠标按下增加按钮抬起时的效果
  addBtn.addEventListener('mouseup', () => {
    addBtn.style.color = null;
    addBtn.style.border = null;
  });
});

//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
// 获取所有删除单个按钮
let delBtns = document.querySelectorAll('.del button');
// 给删除单个按钮绑定点击事件
delBtns.forEach((delBtn, index) => {
  delBtn.onclick = () => {
    delBtn.parentElement.parentElement.parentElement.remove();
    inputs[index].value = 0;
    subtotals[index].innerHTML = 0;
    calcTotal01(); // 重新计算总购买数量与总价，此函数用于全选框的统计
    calcTotal02(); // 重新计算总购买数量与总价，此函数用于单选框的统计
  };
  // 设置鼠标按下删除按钮时的效果
  delBtn.addEventListener('mousedown', () => {
    delBtn.style.color = 'red';
  });
});

//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
// 获取删除选中按钮
let clearSelectBtn = document.querySelector('.clear_select');
// 获取 center 下每个 ul
let uls = [...document.querySelectorAll('.center')];
// 给获取选中按钮绑定点击事件
clearSelectBtn.onclick = () => {
  checkboxs.forEach((checkbox, index) => {
    if (checkbox.checked) {
      uls[index].remove();
      inputs[index].value = 0;
      subtotals[index].innerHTML = 0;
    }
  });
  calcTotal01(); // 重新计算总购买数量与总价，此函数用于全选框的统计
  calcTotal02(); // 重新计算总购买数量与总价，此函数用于单选框的统计
};
// 设置鼠标按下删除选中按钮时的效果
clearSelectBtn.addEventListener('mousedown', () => {
  clearSelectBtn.style.color = 'red';
});
// 设置鼠标按下删除选中按钮抬起时的效果
clearSelectBtn.addEventListener('mouseup', () => {
  clearSelectBtn.style.color = null;
});

//6. 能够清空购物车，总数量和总价要对应变化
// 获取清空购物车按钮
let clearBtn = document.querySelector('.clear');
// 给清空购物车按钮绑定点击事件
clearBtn.onclick = () => {
  uls.forEach((ul) => {
    ul.remove();
  });
  inputs.forEach((input) => {
    input.value = 0;
  });
  subtotals.forEach((subtotal) => {
    subtotal.innerHTML = 0;
  });
  calcTotal01(); // 重新计算总购买数量与总价，此函数用于全选框的统计
};
// 设置鼠标按下清空购物车按钮时的效果
clearBtn.addEventListener('mousedown', () => {
  clearBtn.style.color = 'red';
});
// 设置鼠标按下清空购物车按钮抬起时的效果
clearBtn.addEventListener('mouseup', () => {
  clearBtn.style.color = null;
});
